<script setup>
  import { ref, onMounted } from 'vue'
  import messageApi from '@/apis/message'

  // 任务列表数据
  const announceList = ref([])
  // 下一页页码
  const nextPage = ref(1)
  // 每页包含数据条数
  const pageSize = ref(5)
  //是否有更多
  const hasMore = ref(true)
  // 是否加载完成
  const isTriggered = ref(false)

  // 生命周期
  onMounted(() => {
    getAnnounceList()
  })

  // 下拉刷新
  async function onScrollViewRefresh() {
    // 重新请求第1页数据
    isTriggered.value = true
    await getAnnounceList()
    isTriggered.value = false
  }
  // 上拉更多
  function onScrollToLower() {
    if (!hasMore.value) return
    // 获取下一页数据
    getAnnounceList(nextPage.value)
  }

  // 任务列表
  async function getAnnounceList(page = 1, pageSize = 10) {
    const data = await messageApi.list(200, page, pageSize)
    if (page === 1) announceList.value = []
    // 渲染数据
    announceList.value = [...announceList.value, ...(data.items || [])]
    // 更新下一页页码
    nextPage.value = ++data.page
    // 是否有更多数据
    hasMore.value = nextPage.value <= data.pages
  }

  //全部已读
  const readAll = async () => {
    await messageApi.readAll(200)
    //刷新列表
    isTriggered.value = true
  }
</script>
<template>
  <scroll-view
    class="scroll-view"
    refresher-enabled
    scroll-y
    @refresherrefresh="onScrollViewRefresh"
    @scrolltolower="onScrollToLower"
    :refresher-triggered="isTriggered"
  >
    <view class="scroll-view-wrapper">
      <view class="message-action" @click="readAll">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list :border="false" v-if="announceList.length">
        <uni-list-item
          v-for="announce in announceList"
          :key="announce.id"
          to="`/subpkg_message/content/index${announce.id}`"
          ellipsis="1"
          :title="announce.title"
          :right-text="announce.created"
        >
          <template v-slot:header>
            <text v-if="!announce.isRead" class="dot"></text>
          </template> </uni-list-item
      ></uni-list>
      <view v-else class="message-blank">暂无消息</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
